// 后台页面最顶层
<template>
  <div class="app-wrapper">
    <div class="header-wrapper">
      <top class="headerbar-container" @handleLogin="goLogin()" @handleRegister="goRegister()"></top>
    </div>
    <div class="main-container">
      <app-main></app-main>
    </div>
     <div class="footer-wrapper">
      <bottom class="footerbar-container"></bottom>
    </div>
  </div>
</template>


<script>
import Top from '@/views/index/Top'
import AppMain from '@/views/index/AppMain'
import Bottom from '@/views/index/Bottom'

export default {
  name: 'index',
  components: {
    Top,
    AppMain,
    Bottom
  },
   methods:{
          goLogin(){
              this.$router.push('/login');
          },
          goRegister(){
            console.log("register");
            console.log( this.$router);
            this.$router.push('/register');
            console.log( this.$router);
          }
      }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    .app-wrapper{
      min-width: 877px;
    }
    .header-wrapper{
        height:50px;
        line-height:50px;
        padding:0 15%;
        width:100%;
        min-width: 877px;
        position:fixed;
        top:0;
        background-color: rgba(255, 51, 102, 1);
    }
    .main-container{
         margin-top:60px;
         border:1px solid #000;
         height:200px;
    }
    .footer-wrapper{
        height:62px;
        width: 100%;
        min-width: 877px;
        border:1px solid #000;
        position:fixed;
        bottom:0;
        background-color: rgba(102, 102, 102, 1);
    }
    .headerbar-container{
            width: 100%;
    height: 100%;
    float: left;
    }
</style>